import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';

function GameBoard({ grid, setGrid, rowHints, colHints }) {
    const [isMouseDown, setIsMouseDown] = useState(false);
    const [currentValue, setCurrentValue] = useState(null);
    const [lastCell, setLastCell] = useState(null);

    const handleMouseDown = useCallback((row, col, value) => {
        setIsMouseDown(true);
        setCurrentValue(value === 1 ? 0 : 1);
        setLastCell({ row, col });
        
        setGrid(prevGrid => {
            const newGrid = [...prevGrid];
            newGrid[row] = [...newGrid[row]];
            newGrid[row][col] = value === 1 ? 0 : 1;
            return newGrid;
        });
    }, [setGrid]);

    const handleMouseEnter = useCallback((row, col) => {
        if (!isMouseDown || !lastCell) return;
        if (lastCell.row === row && lastCell.col === col) return;

        setLastCell({ row, col });
        setGrid(prevGrid => {
            const newGrid = [...prevGrid];
            newGrid[row] = [...newGrid[row]];
            newGrid[row][col] = currentValue;
            return newGrid;
        });
    }, [isMouseDown, currentValue, lastCell, setGrid]);

    const handleMouseUp = useCallback(() => {
        setIsMouseDown(false);
        setCurrentValue(null);
        setLastCell(null);
    }, []);

    const handleTouchMove = useCallback((e) => {
        if (!isMouseDown) return;
        
        const touch = e.touches[0];
        const element = document.elementFromPoint(touch.clientX, touch.clientY);
        
        if (element && element.classList.contains('cell')) {
            const row = parseInt(element.dataset.row);
            const col = parseInt(element.dataset.col);
            
            if (!isNaN(row) && !isNaN(col)) {
                handleMouseEnter(row, col);
            }
        }
    }, [isMouseDown, handleMouseEnter]);

    useEffect(() => {
        document.addEventListener('mouseup', handleMouseUp);
        document.addEventListener('touchend', handleMouseUp);
        document.addEventListener('touchmove', handleTouchMove, { passive: false });

        return () => {
            document.removeEventListener('mouseup', handleMouseUp);
            document.removeEventListener('touchend', handleMouseUp);
            document.removeEventListener('touchmove', handleTouchMove);
        };
    }, [handleMouseUp, handleTouchMove]);

    return (
        <div className="game-board">
            <div className="board-wrapper" data-size={grid.length}>
                <div className="board-content">
                    <div className="col-hints">
                        <div className="spacer"></div>
                        {colHints.map((hints, i) => (
                            <div key={i} className="hint-column">
                                {hints.filter(h => h > 0).map((hint, j) => (
                                    <div key={j} className="hint">{hint}</div>
                                ))}
                            </div>
                        ))}
                    </div>
                    <div className="board-main">
                        <div className="row-hints">
                            {rowHints.map((hints, i) => (
                                <div key={i} className="hint-row">
                                    {hints.filter(h => h > 0).map((hint, j) => (
                                        <div key={j} className="hint">{hint}</div>
                                    ))}
                                </div>
                            ))}
                        </div>
                        <div className="grid">
                            {grid.map((row, i) => (
                                <div key={i} className="row">
                                    {row.map((cell, j) => (
                                        <div
                                            key={j}
                                            className={`cell ${cell === 1 ? 'filled' : ''}`}
                                            data-row={i}
                                            data-col={j}
                                            onMouseDown={() => handleMouseDown(i, j, cell)}
                                            onMouseEnter={() => handleMouseEnter(i, j)}
                                            onTouchStart={() => handleMouseDown(i, j, cell)}
                                            onClick={(e) => e.preventDefault()}
                                        />
                                    ))}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

GameBoard.propTypes = {
    grid: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
    setGrid: PropTypes.func.isRequired,
    rowHints: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired,
    colHints: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired
};

export default GameBoard; 